<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<!--[if lt IE 9]>
			<script type="text/javascript" src="lib/html5shiv.js"></script>
			<script type="text/javascript" src="lib/respond.min.js"></script>
		<![endif]-->
		<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.ad.css" />
		<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.ab.css" />
		<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
		<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.min.css" />
		<!--[if lt IE 9]>
			<link href="static/h-ui/css/H-ui.ie.css" rel="stylesheet" type="text/css" />
		<![endif]-->
		<!--[if IE 6]>
			<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
			<script>DD_belatedPNG.fix('*');</script>
		<![endif]-->
		<title>Hello-网上银行</title>
		<meta name="keywords" content="基于H-ui前端框架的网页设计（中软国际）">
		<meta name="description" content="运用H-ui前端框架设计，HTML为基础的网站。不求多花哨，只求简单实用">
	</head>

	<body>
		<header class="navbar-wrapper">
			<div class="navbar navbar-black navbar-fixed-top">
				<div class="container cl">
					<a class="logo navbar-logo hidden-xs" href="demo.html">Hello-网上银行</a>
					<a class="logo navbar-logo-m visible-xs" href="demo.html">Hello-网上银行</a> <span class="logo navbar-slogan hidden-xs">简单 &middot; 实用 &middot; 适合我这种菜鸟</span>
					<a aria-hidden="false" class="nav-toggle Hui-iconfont visible-xs" href="javascript:;">&#xe667;</a>
					<nav class="nav navbar-nav nav-collapse" role="navigation" id="Hui-navbar">
						<ul class="cl">
							<li class="current">
								<a href="demo.html" target="_blank">首页</a>
							</li>
							<li>
								<a href="index1.html" target="_blank">用户业务</a>
							</li>
							<li>
								<a href="#" target="_blank">投诉及建议</a>
							</li>
							<li>
								<a href="#" target="_blank">联系我们</a>
							</li>
						</ul>
					</nav>
					<nav class="navbar-userbar f-r hidden-xs hidden-sm">
						<a class="btn btn-success radius" style="margin-top: 3px;" target="_blank" href="#">注册</a>
						<a class="btn btn-primary radius" style="margin-top: 3px;" target="_blank" href="#">登录</a>
					</nav>
				</div>
			</div>

		</header>
		<aside class="Hui-aside">
			<input runat="server" id="divScrollValue" type="hidden" value="" />
			<div class="menu_dropdown bk_2">
				<dl id="menu_notes">
					<dt>&nbsp;&nbsp;&nbsp;&nbsp;用户查询<i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i></dt>
					<dd>
						<ul>
							<li>
								<a href="query.html">金额查询</a>
							</li>
							<li>
								<a href="detail.html">交易明细查询</a>
							</li>
						</ul>
					</dd>
				</dl>
				<ul>
					<li id="curse">
						<a href="transfer.html">&nbsp;&nbsp;&nbsp;&nbsp;用户转账</a>
					</li>
				</ul>
				<ul>
					<li>
						<a href="savings.html">&nbsp;&nbsp;&nbsp;&nbsp;活/定期业务</a>
					</li>
				</ul>
				</dl>
			</div>
		</aside>

		<div class="dislpayArrow hidden-xs">
			<a class="pngfix" href="javascript:void(0);" onClick="displaynavbar(this)"></a>
		</div>

		<section class="Hui-article-box">
			<nav class="breadcrumb">
				<i class="Hui-iconfont">&#xe67f;</i>
				<a href="demo.html" class="c-primary">首页</a> <span class="c-gray en">&gt;</span>
				<a href="#">用户转账</a> <span class="c-gray en">&gt;</span> <span class="c-gray">当前页面</span>
			</nav>
			<div id="tab_demo" class="HuiTab">
				<div class="tabBar clearfix"><span style="color: #9966CC;">本行转账</span><span style="color: #FF9966;">跨行转账</span></div>
				<div class="tabCon">
					<div class="panel panel-default" style="background: center;">
						<div class="panel-header"><span style="color: #FF6666;">本行</span>转账</div>
						<div class="panel-body">
							<form action="" method="post" class="form form-horizontal responsive" id="demoform">
								<div class="row cl">
									<label class="form-label col-xs-3">请输入<span style="color: #FF6666;">本行</span>银行卡账号：</label>
									<div class="formControls col-xs-8">
										<input type="text" class="input-text" placeholder="请输入19位银行卡账号" name="number" id="number">
									</div>
								</div>
								<div class="row cl">
									<label class="form-label col-xs-3">手机：</label>
									<div class="formControls col-xs-8">
										<input type="text" class="input-text" autocomplete="off" placeholder="手机" name="telephone" id="telephone">
									</div>
								</div>
								<div class="row cl">
									<label class="form-label col-xs-3">请输入登录密码：</label>
									<div class="formControls col-xs-8">
										<input type="password" class="input-text" autocomplete="off" placeholder="密码" name="password" id="password">
									</div>
								</div>
								<div class="row cl">
									<label class="form-label col-xs-3">登录密码验证：</label>
									<div class="formControls col-xs-8">
										<input type="password" class="input-text" autocomplete="off" placeholder="密码" name="password2" id="password2">
									</div>
								</div>
								<div class="row cl">
									<div class="col-xs-8 col-xs-offset-3">
										<input class="btn btn-success-outline radius" type="submit" value="&nbsp;&nbsp;确认转账&nbsp;&nbsp;">
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
				<div class="tabCon">
					<div class="panel panel-default" style="background: center;">
						<div class="panel-header"><span style="color: #FF6666;">跨行</span>转账</div>
						<div class="panel-body">
							<form action="" method="post" class="form form-horizontal responsive" id="demofor">
								<div class="row cl">
									<label class="form-label col-xs-3">请输入<span style="color: #FF6666;">其它</span>银行卡账号：</label>
									<div class="formControls col-xs-8">
										<input type="text" class="input-text" placeholder="请输入19位银行卡账号" name="number" id="number">
									</div>
								</div>
								<div class="row cl">
									<label class="form-label col-xs-3">手机：</label>
									<div class="formControls col-xs-8">
										<input type="text" class="input-text" autocomplete="off" placeholder="手机" name="telephone" id="telephone">
									</div>
								</div>
								<div class="row cl">
									<label class="form-label col-xs-3">请输入登录密码：</label>
									<div class="formControls col-xs-8">
										<input type="password" class="input-text" autocomplete="off" placeholder="密码" name="password" id="password">
									</div>
								</div>
								<div class="row cl">
									<label class="form-label col-xs-3">登录密码验证：</label>
									<div class="formControls col-xs-8">
										<input type="password" class="input-text" autocomplete="off" placeholder="密码" name="password2" id="password2">
									</div>
								</div>
								<div class="row cl">
									<div class="col-xs-8 col-xs-offset-3">
										<input class="btn btn-secondary-outline radius" type="submit" value="&nbsp;&nbsp;确认转账&nbsp;&nbsp;">
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>

			<footer class="footer mt-20">
				<div class="container">
					<nav class="footer-nav">
						<a target="_blank" href="#">关于Hello-网上银行</a> <span class="pipe">|</span>
						<a target="_blank" href="#">H-ui前端框架</a> <span class="pipe">|</span>
						<a target="_blank" href="#">感谢支持</a>
					</nav>
					<p>
						<a rel="nofollow" target="_blank" href="http://www.baidu.com/">相关网站搜索</a> <br> 未经允许，禁止转载、抄袭、镜像
						<br> 用心做站，做不一样的站
					</p>
				</div>
			</footer>
		</section>

		<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
		<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
		<script type="text/javascript" src="lib/jquery.SuperSlide/2.1.1/jquery.SuperSlide.min.js"></script>
		<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.min.js"></script>
		<script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script>
		<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.min.js"></script>
		<script type="text/javascript" src="static/h-ui/js/H-ui.ac.js"></script>
		<script type="text/javascript" src="static/h-ui/js/H-ui.ad.js"></script>
		<script type="text/javascript" src="static/h-ui/js/H-ui.as.js"></script>
		<script>
			//选项卡
			$(function() {
				$.Huitab("#tab_demo .tabBar span", "#tab_demo .tabCon", "current", "mousemove", "1");
			});
			// #tab_demo 父级id
			// #tab_demo .tabBar span 控制条
			// #tab_demo .tabCon 内容区
			// click 事件 点击切换，可以换成mousemove 移动鼠标切换
			// 1	默认第2个tab为当前状态（从0开始）
			$(function() {
				//本行转账验证
				$("#demoform").validate({
					rules: {
						number: {
							required: true,
							minlength: 19,
							maxlength: 19
						},
						telephone: {
							required: true,
							isMobile: true,
						},
						password: {
							required: true,
							isPwd: true,
						},
						password2: {
							required: true,
							equalTo: "#password"
						},
					}
				});

			});
			$(function() {
				//跨行转账验证
				$("#demofor").validate({
					rules: {
						number: {
							required: true,
							minlength: 19,
							maxlength: 19
						},
						telephone: {
							required: true,
							isMobile: true,
						},
						password: {
							required: true,
							isPwd: true,
						},
						password2: {
							required: true,
							equalTo: "#password"
						},
					}
				});

				//光标固定
				$("#curse").attr("class", "current");

			});
		</script>

	</body>

</html>
<!--H-ui前端框架提供前端技术支持 h-ui.net @2017-01-01 -->